<template>
	<div>
		<div class="nav_box">
			<div class="nav_inner">
				<router-link to="/layout">
					<img src="../assets/smallIcon/return.png" alt="">
				</router-link>
			首页推荐
			</div>
		</div>
		<p class="hot"><span>热门</span></p>
		<div class="show">
			<div class="strateg">           	
	        	<img src="../assets/personIcon/lushangzhengwen_01.png"  alt="">
	        	<button>+ 关注</button>
	        	<h3>粥粥贤</h3>
				<p class="nav_f">3分钟前 来自 路上 lushang.com</p>
				<p>诚然，独乐乐不如众乐乐。桃花源深处，大可呼朋友引伴，或邀知己二三，或与爱人携手同行，亦或一人暴走一城，从此与旅游行箱结盟。从一座城到另一座城，从你的城到他的城，又或者从城市人乡野，从乡野入倾城，行走在路上，谁说...</p>
				<img class="picture"src="../assets/landscape/shouye01.png" alt="">		
        	</div>
		</div>
		<div class="good_count">
			<div class="good_inner">
				<div class="good_left">
					<span>评论：29</span>
					<span>转发：172</span>
				</div>
				<div class="good_right">
					<span>赞：179</span>
				</div>
			</div>
		</div>
		<p class="hotdu">按热度</p>
		<div class="comment">
			<ul>
				<li v-for="item in personMsg">
					<div class="person_inner">
						<div class="person_left">
							<img :src="item.icon" alt="">
							<div class="person_msg">
								<p>{{item.p_name}}</p>
								<p>{{item.p_info}}</p>
								<p>{{item.p_time}}</p>
							</div>
						</div>
						<div class="icon">
							<img src="../assets/smallIcon/share.png" alt="">
							<img src="../assets/smallIcon/infromation.png" alt="">
							<img src="../assets/smallIcon/Fabulous.png" alt="">
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="footer_nav">
			<ul>
				<li>
					<img src="../assets/smallIcon/share.png" alt="">转发
				</li>
				<li>
					<img src="../assets/smallIcon/infromation.png" alt="">评论
				</li>
				<li>
					<img src="../assets/smallIcon/Fabulous.png" alt="">赞
				</li>
			</ul>
		</div>
	</div>
</template>

<script>

export default{
	name:"tuijian",
	data(){
		return{
			personMsg:[{
				icon:require("../assets/personIcon/lushangzhengwen_02.png"),
				p_name:"雨竹",
				p_info:"风景很棒",
				p_time:"9-6  11:40"
			},
			{
				icon:require("../assets/personIcon/lushangzhengwen_03.png"),
				p_name:"夏炎",
				p_info:"好好看",
				p_time:"8-23  19:19"
			},
			{
				icon:require("../assets/personIcon/lushangzhengwen_04.png"),
				p_name:"小幸福",
				p_info:"来  让我们一起结伴同行",
				p_time:"8-10  13:04"
			},
			{
				icon:require("../assets/personIcon/lushangzhengwen_05.png"),
				p_name:"小范范",
				p_info:"首先你要有一个对象",
				p_time:"7-12  13:14"
			}]
		}
	}
}	

</script>
<style scoped lang="less">
	.nav_box{
		width: 100%;
		height: 94 /50rem;
		background-color: #7dd19d;
		.nav_inner{
			width: 710 /50rem;
			height: 100%;
			margin: 0  20/50rem 0 20/50rem;
			text-align: center;
			overflow: hidden;
			line-height: 94 /50rem;
			font-size: 36 /50rem;
			img{
				width: 22 /50rem;
				height:40 /50rem;
				float: left;
				margin-top: 28/50rem;
			}
		}
	}
	.hot{
		width: 100%;
		height: 50/50rem;
		background-color: #fff;
		line-height:50/50rem;
		margin-top: 10 /50rem;
		margin-bottom: 2 /50rem;
		span{
			margin-left: 20 /50rem;
		}
	}
	.show{
		width: 100%;
		height: 565/50rem;
		background-color: #fff;
	}
	.strateg{
		width: 710 / 50rem;
		height: 565 / 50rem;
		margin-left: 20 /50rem;
		margin-right: 20 / 50rem;
		
		img{
	        display: inline-block;
	        width: 80 / 50rem;
	        height: 80 / 50rem;
	        margin-top: 20 / 50rem;
        }
        h3{
            margin-left: 100 / 50rem;
            margin-top: -75 / 50rem;
	        font-size: 24 / 50rem;
        }
        .nav_f{
	       margin-left: 100 / 50rem;
	       margin-top: 10 / 50rem;
        }
        p{
	       font-size: 26 / 50rem;
	       margin-top: 20 / 50rem;
	       line-height: 35 / 50rem;
        }
        button{
           width: 100 / 50rem;
           height: 44 / 50rem;
           background: #fff;
           color: #7dd19d;
           float: right;
           border: 1px solid #7dd19d;
           margin-right: 21 / 50rem;
           margin-top: 21 / 50rem;
           border-radius: 8 / 50rem;
		   font-size: 12 /50rem;
        }
        .picture{
        	width: 710 / 50rem;
        	height: 280 / 50rem;
        	margin-top: 14 / 50rem;

        }
        hr{
           border: 1px solid #e6e6e6;
           border-top: none;
           margin-top: 5 / 50rem;
	    }
	}
	.good_count{
		width: 100%;
		height: 50 /50rem;
		background-color: #fff;
		margin-top: 20/50rem;
		.good_inner{
			width: 710 /50rem;
			height: 50 /50rem;
			margin: 0 auto;
			line-height: 1rem;
			font-weight: bold;
			font-size: 20 /50rem;
			.good_left{
				float: left;
				span{
					margin-right: 50 /50rem;
				}
			}
			.good_right{
				float: right;
			}
		}
	}
	.hotdu{
		width: 710 /50rem;
		margin: 0 auto;
		height: 50 /50rem;
		text-align: right;
		line-height: 1rem;
		color:#5dade2;
		font-size: 18 /50rem;
	}
	.comment{
		width: 100%;
		margin-bottom: 80 /50rem;
		ul{
			width: 100%;				
			overflow: hidden;
			li{
				width: 750/50rem;
				background-color: #fff;			
				margin-bottom: 2 /50rem;
				.person_inner{
					width: 710 /50rem;
					margin: 0 auto;
				}
			}
			li:last-child{
				margin-bottom: 0
			}
			.person_left{
				img{
					float: left;
					margin-top: 10 /50rem;
					width: 60 /50rem;
					height: 60 /50rem;
				}
				.person_msg{
					float: left;
					margin-top: 15 /50rem;
					margin-left: 20 /50rem;
					p:nth-child(1){
						font-size: 24 /50rem;
						margin-bottom: 5 /50rem;
					}
					p:nth-child(2){
						font-size: 20 /50rem;
						margin-bottom:5 /50rem;
					}
					p:nth-child(3){
						font-size: 18 /50rem;
						margin-bottom:5 /50rem;
					}
				}
			}
			.icon{
				overflow: hidden;
				img{
					float: right;
					width: 40/50rem;
					height: 40 /50rem;
					margin:60 /50rem 18/50rem 18 /50rem 18/50rem;
				}
			}
		}
	}
	.footer_nav{
		width: 100%;
		height: 80 /50rem;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #fff;
		ul{
			display: flex;
			li{
				text-align: center;
				flex:1;
				line-height: 80 /50rem;
				img{
					width: 40 /50rem;
					height: 40 /50rem;
					vertical-align: middle;
					margin-right: 20/50rem;
				}
			}
		}
	}
</style>